﻿@namespace MudBlazor.Charts
@inherits MudRadialChartBase<T, RadarChartOptions>
@typeparam T

<div @attributes="UserAttributes" class="@Classname">
    <BaseRadialChart T="T"
                     TChartOptions="RadarChartOptions"
                     ElementRefChanged="SetElementReference"
                     Width="@Width"
                     Height="@Height"
                     Paths="@_paths"
                     Radius="@Radius"
                     ChartClass="mud-chart-radar"
                     ChartSeries="@ChartSeries"
                     ChartLabels="@ChartLabels"
                     ChartOptions="@ChartOptions"
                     ChartGrid="@RenderChartGrid()"
                     ChartDataPoints="@RenderChartDataPoints"
                     CustomGraphics="@CustomGraphics"
                     HoveredSegment="@_hoveredSegment"
                     UserAttributes="@UserAttributes"
                     TooltipTemplate="@TooltipTemplate"
                     TooltipPositionFunc="@TooltipPositionFunc"
                     OnPathClick="async (i) => await SetSelectedIndexAsync(i)"
                     OnMouseOver="(x) => OnSegmentMouseOver(x.Args, x.Segment)"
                     OnMouseOut="() => OnSegmentMouseOut()" />

    <Legend T="T" Data="@_legends" ShowLegend="@ChartOptions?.ShowLegend" CanHideSeries="@CanHideSeries"
            ChartPalette="@ChartOptions?.ChartPalette" OnLegendSelected="async (i) => await SetSelectedIndexAsync(i)" />
</div>

@code {
    private RenderFragment RenderChartGrid() => builder =>
    {
        if (ChartOptions.ShowGridLines is not true || _gridLines.Count == 0) return;

        var seq = 0;

        // Grid lines group
        builder.OpenElement(seq++, "g");
        builder.AddAttribute(seq++, "class", "mud-chart-radar-grid");
        foreach (var gridLine in _gridLines)
        {
            builder.OpenElement(seq++, "path");
            builder.AddAttribute(seq++, "class", "mud-chart-grid-line");
            builder.AddAttribute(seq++, "d", gridLine.Data);
            builder.AddAttribute(seq++, "fill", "none");
            builder.AddAttribute(seq++, "stroke", ChartOptions.GridLineColor);
            builder.AddAttribute(seq++, "stroke-width", ChartOptions.GridLineWidth);
            builder.CloseElement();
        }
        builder.CloseElement(); // </g>

        // Axis lines group
        builder.OpenElement(seq++, "g");
        builder.AddAttribute(seq++, "class", "mud-chart-radar-axes");
        foreach (var axisLine in _axisLines)
        {
            builder.OpenElement(seq++, "path");
            builder.AddAttribute(seq++, "class", "mud-chart-axis-line");
            builder.AddAttribute(seq++, "d", axisLine.Data);
            builder.AddAttribute(seq++, "fill", "none");
            builder.AddAttribute(seq++, "stroke", ChartOptions.AxisLineColor);
            builder.AddAttribute(seq++, "stroke-width", ChartOptions.AxisLineWidth);
            builder.CloseElement();

            if (ChartOptions.ShowAxisLabels)
            {
                var anchor = Math.Abs(axisLine.LabelX) < 10 ? "middle" : (axisLine.LabelX < 0 ? "end" : "start");
                var baseline = Math.Abs(axisLine.LabelY) < 10 ? "middle" : (axisLine.LabelY < 0 ? "auto" : "hanging");
                builder.AddMarkupContent(seq++,
                    $"<text class='mud-chart-axis-label' x='{axisLine.LabelX.ToStr()}' y='{axisLine.LabelY.ToStr()}' font-size='12px' text-anchor='{anchor}' dominant-baseline='{baseline}'>{axisLine.LabelYValue}</text>");
            }
        }
        builder.CloseElement(); // </g>

        // Axis value labels group 
        builder.OpenElement(seq++, "g");
        builder.AddAttribute(seq++, "class", "mud-chart-radar-axis-values");
        foreach (var axisValue in _axisValues)
        {
            builder.AddMarkupContent(seq++,
                $"<text class='mud-chart-axis-value' x='{axisValue.LabelX.ToStr()}' y='{axisValue.LabelY.ToStr()}' font-size='10px' text-anchor='start' dominant-baseline='middle' fill='#666'>{axisValue.LabelYValue}</text>");
        }
        builder.CloseElement(); // </g>
    };

    private RenderFragment RenderChartDataPoints(SvgPolygon path) => builder =>
    {
        if (ChartOptions?.ShowDataMarkers is not true || path.Points.Count == 0) return;

        var color = ChartOptions!.ChartPalette?.Length > 0
                        ? ChartOptions.ChartPalette.GetValue(path.Index % ChartOptions.ChartPalette.Length)?.ToString() ?? string.Empty
                        : string.Empty;
        var seq = 0;
        foreach (var point in path.Points)
        {
            builder.OpenElement(seq++, "circle");
            builder.AddAttribute(seq++, "class", "mud-chart-series-point");
            builder.AddAttribute(seq++, "cx", ToS(point.LabelX));
            builder.AddAttribute(seq++, "cy", ToS(point.LabelY));
            builder.AddAttribute(seq++, "r", ChartOptions.DataPointRadius);
            builder.AddAttribute(seq++, "fill", color);
            builder.AddAttribute(seq++, "onmouseover", EventCallback.Factory.Create<MouseEventArgs>(this, e => OnSegmentMouseOver(e, point)));
            builder.AddAttribute(seq++, "onmouseout", EventCallback.Factory.Create(this, OnSegmentMouseOut));
            builder.AddAttribute(seq++, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, async (i) => await SetSelectedPointAsync(point)));
            builder.CloseElement();
        }
    };

}
